<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let data = {
            "Fish": {
                "trout": {},
                "salmon": {}
            },
            "Tree": {
                "Huge": {
                    "sequoia": {},
                    "oak": {}
                },
                "Flowering": {
                    "apple tree": {},
                    "magnolia": {}
                }
            }
        };
        let container = document.body;   //body内所有html代码
        // console.log(contain);
        function createTree(container, data) {
            let ul = document.createElement('ul');      //创建一个ul
            for (const key in data) {
                if (key != null) {      //排除空ul
                    let li = document.createElement('li');  //创建一个li
                    li.innerHTML = key;
                    container.append(ul);
                    ul.append(li);       //Element.append();    ul下插入节点li
                    createTree(ul, data[key]);
                }
            }
            console.log(ul);
        }
        createTree(container, data);
    </script>
</body>

</html>